<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>订单审核 | 电动车销售系统</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/warehouse/orderReview.css">
</head>
<body>
<header class="dashboard-header">
  <div class="container">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h1 class="h3 mb-0"><i class="bi bi-bicycle"></i> 电动车销售管理系统</h1>
        <p class="mb-0 opacity-75">仓库管理 - 订单审核</p>
      </div>
      <div class="d-flex align-items-center">
        <div class="me-3">
          <span class="d-none d-md-inline">仓库管理员</span>
          <div class="badge bg-light text-dark">
            <i class="bi bi-person-circle me-1"></i> 仓库管理员
          </div>
        </div>
        <div class="dropdown">
          <button class="btn btn-light rounded-circle p-1" type="button" data-bs-toggle="dropdown">
            <i class="bi bi-gear fs-5"></i>
          </button>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/change_password.jsp"><i class="bi bi-lock me-2"></i> 修改密码</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger" href="${pageContext.request.contextPath}/LogoutServlet"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="container py-4">
  <a href="/web/warehouse/warehouse_admin.jsp" class="back-link">
    <i class="bi bi-arrow-left"></i> 返回仓库管理菜单
  </a>

  <div class="dashboard-card shadow">
    <div class="card-header">
      <div>
        <h5 class="card-title"><i class="bi bi-clipboard-check me-2 text-primary"></i>订单审核</h5>
        <p class="card-subtitle">待审核订单列表</p>
      </div>
    </div>

    <div class="card-body">
      <!-- 审核结果提示 -->
      <c:if test="${approveSuccess == true}">
        <div class="alert-message success-message">
          <i class="bi bi-check-circle-fill"></i>
          <div>审核并入库成功！</div>
        </div>
      </c:if>
      <c:if test="${approveSuccess == false}">
        <div class="alert-message error-message">
          <i class="bi bi-exclamation-circle-fill"></i>
          <div>审核失败，请重试！</div>
        </div>
      </c:if>

      <!-- 订单概览 -->
      <div class="pending-orders">
        <div class="summary-card">
          <div class="title">待审核订单</div>
          <div class="number">${fn:length(orderList)}</div>
          <div class="title">笔待处理</div>
        </div>

        <div class="summary-card">
          <div class="title">总采购量</div>
          <div class="number">
            <c:set var="totalQuantity" value="0" />
            <c:forEach items="${orderList}" var="order">
              <c:set var="totalQuantity" value="${totalQuantity + order.quantity}" />
            </c:forEach>
            ${totalQuantity}
          </div>
          <div class="title">辆电动车</div>
        </div>

        <div class="summary-card">
          <div class="title">最近订单</div>
          <div class="number">
            <c:if test="${not empty orderList}">
              ${orderList[0].createTime}
            </c:if>
            <c:if test="${empty orderList}">
              暂无数据
            </c:if>
          </div>
          <div class="title">创建时间</div>
        </div>
      </div>

      <c:choose>
        <c:when test="${empty orderList}">
          <div class="empty-message">
            <i class="bi bi-clipboard-check"></i>
            <p>当前没有待审核订单</p>
            <p>所有订单已处理完成，请稍后再来查看</p>
          </div>
        </c:when>
        <c:otherwise>
          <div class="data-table-container">
            <table class="data-table">
              <thead>
              <tr>
                <th>订单ID</th>
                <th>业务员ID</th>
                <th>车辆型号ID</th>
                <th>采购数量</th>
                <th>创建时间</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <c:forEach items="${orderList}" var="order">
                <tr>
                  <td>${order.id}</td>
                  <td>${order.user_id}</td>
                  <td>${order.v_id}</td>
                  <td>
                    <span class="badge bg-primary rounded-pill">${order.quantity}</span>
                  </td>
                  <td>${order.createTime}</td>
                  <td>
                    <span class="status-badge status-pending">待审核</span>
                  </td>
                  <td>
                    <form class="action-form" action="OrderReviewServlet" method="post" onsubmit="return confirm('确认审核通过并入库？')">
                      <input type="hidden" name="orderId" value="${order.id}">
                      <button type="submit" class="action-btn">
                        <i class="bi bi-check-circle me-1"></i> 审核通过
                      </button>
                    </form>
                  </td>
                </tr>
              </c:forEach>
              </tbody>
            </table>
          </div>

          <!-- 分页导航 -->
          <c:if test="${totalPages > 1}">
            <div class="pagination">
              <a href="OrderReviewServlet?page=1"><i class="bi bi-chevron-double-left"></i> 首页</a>
              <a href="OrderReviewServlet?page=${currentPage - 1}"><i class="bi bi-chevron-left"></i> 上一页</a>
              <span class="current-page">${currentPage}</span>
              <a href="OrderReviewServlet?page=${currentPage + 1}">下一页 <i class="bi bi-chevron-right"></i></a>
              <a href="OrderReviewServlet?page=${totalPages}">末页 <i class="bi bi-chevron-double-right"></i></a>
            </div>
          </c:if>
        </c:otherwise>
      </c:choose>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 添加表格行点击效果
  document.querySelectorAll('.data-table tbody tr').forEach(row => {
    row.addEventListener('click', function() {
      this.classList.toggle('table-active');
    });
  });

  // 添加页面加载动画
  document.addEventListener('DOMContentLoaded', function() {
    const rows = document.querySelectorAll('.data-table tbody tr');
    rows.forEach((row, index) => {
      row.style.opacity = '0';
      row.style.transform = 'translateY(10px)';

      setTimeout(() => {
        row.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
        row.style.opacity = '1';
        row.style.transform = 'translateY(0)';
      }, 100 * index);
    });

    // 自动关闭消息提示
    setTimeout(() => {
      document.querySelectorAll('.alert-message').forEach(alert => {
        alert.style.display = 'none';
      });
    }, 5000);
  });

  // 确认审核函数
  function confirmApprove(event) {
    if (!confirm('确认审核通过并入库？')) {
      event.preventDefault();
    }
  }
</script>
</body>
</html>